<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .title {
      background-color: orange;
      width: 200px;
    }
  </style>
</head>
<body>
  <div id="test"></div>
  <!-- 引入核心库、操作dom库、babel将jsx转为js -->
  <!-- React -->
  <script src="../js/react.development.js"></script>
  <!-- ReactDOM -->
  <script src="../js/react-dom.development.js"></script>
  <script src="../js/babel.min.js"></script>
  <!-- 一定要指定type为babel -->
  <script type="text/babel">
  // 1.1 使用jsx创建虚拟dom【jsx使得创建虚拟dom更简单】
  const vdom =
  (<div>
    <h1 style={{color:'white'}} className="title">hello, react</h1>
    <input />
  </div>)
  // 1.2 使用js创建dom 标签名、标签属性、标签体内容
  const vdom2 = React.createElement('h1',{id:'title'}, 'hello react2')
  // 2. 渲染虚拟dom到页面
  ReactDOM.render(vdom, document.getElementById("test"))
  // ReactDOM.render(vdom2, document.getElementById("test"))
  </script>
</body>
<!-- 笔记
* 虚拟dom本质就是Object类型的对象
* 虚拟dom省去很多属性 虚拟dom在react内部使用 很多属性不需要
* 虚拟dom最后会转为真实dom

JSX语法规则：
1. 定义虚拟dom不需要引号包裹
2. {}引入JS表达式
3. 样式用className引入
4. 内联样式用style={{key:'value'}}
5. 虚拟dom只能有一个根标签
6. 标签必须闭合
7. 标签首字母
   小写字母开头：将标签改为html中元素，如果html没有就报错
   大写字母开头：渲染对应的组件，如果组件没有定义就报错
-->
</html>
